<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<%@taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<%@taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<title>Twitter Bootstrap 3 Fixed Layout Example</title>
<link rel="stylesheet" type="text/css"
	href="resources/css/bootstrap.min.css">
<script type="text/javascript" src="resources/js/jquery.min.js"></script>
<script type="text/javascript" src="resources/js/bootstrap.min.js"></script>
<script type="text/javascript" src="resources/js/scripts.js"></script>

<link rel="stylesheet" type="text/css"
	href="http://bootboxjs.com/vendor/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css"
	href="http://cdn.datatables.net/plug-ins/725b2a2115b/integration/bootstrap/3/dataTables.bootstrap.css">

<script
	src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript"
	src="http://cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script>
<script type="text/javascript"
	src="http://cdn.datatables.net/plug-ins/725b2a2115b/integration/bootstrap/3/dataTables.bootstrap.js"></script>
<script src="http://bootboxjs.com/vendor/js/bootstrap.min.js"></script>
<script src="<c:url value="http://bootboxjs.com/bootbox.js" />"></script>


</head>
<style>
body {
	font-size: 140%;
}

body {
	padding-top: 70px;
}
</style>
<script>
	$(document).ready(function() {
		var table = $('#example').DataTable();
		table.column(4).search("Yes").draw();
		$('#example tbody').on('click', 'tr', function() {
			if ($(this).hasClass('active')) {
				$(this).removeClass('active');
			} else {
				table.$('tr.active').removeClass('active');
				$(this).addClass('active');
			}
		});
		$("#example tr").css('cursor', 'pointer');
	});
</script>
<script type="text/javascript">
	function checkIncludeActive() {
		if (document.getElementById("includeinactive").checked != true) {
			var table = $('#example').DataTable();
			table.column(4).search("Yes").draw();
		} else {
			var table = $('#example').DataTable();
			table.column(4).search("").draw();
		}
	}
	function onActive(directorateID, isActive) {
		if (isActive.trim() == 'false') {
			bootbox
					.confirm(
							"Do you want to make this Directorate active?",
							function(result) {
								if (result == true) {
									$
											.ajax({
												url : "activeDirectorate?directorateID="
														+ directorateID,
												type : "GET",
												success : function() {
												}

											});
									document.getElementById(
											'directorate' + directorateID)
											.getElementsByTagName("td")[4].childNodes[0].nodeValue = "Yes";
								} else {
								}
							});
		}
	}
</script>

<body>
	<nav id="myNavbar"
		class="navbar navbar-default navbar-inverse navbar-fixed-top"
		role="navigation"> <!-- Brand and toggle get grouped for better mobile display -->
	<div class="container">
		<div class="navbar-header">
			<button type="button" class="navbar-toggle" data-toggle="collapse"
				data-target="#navbarCollapse">
				<span class="sr-only">Toggle navigation</span> <span
					class="icon-bar"></span> <span class="icon-bar"></span> <span
					class="icon-bar"></span>
			</button>
			<a class="navbar-brand" href="#">Home</a>
		</div>
		<!-- Collect the nav links, forms, and other content for toggling -->
		<div class="collapse navbar-collapse" id="navbarCollapse">
			<ul class="nav navbar-nav">
				<li class="active"><a href="#" target="_blank">Organisation</a></li>
			</ul>
		</div>
	</div>
	</nav>



	<div class="container">
		<h2>List Directorate</h2>
		<hr>
		<div style="float: right;">
			<input type="button" value="Create"
				onClick="location.href='addDirectorate?orgID=${orgID}'" /> <input
				type="checkbox" id="includeinactive" onclick="checkIncludeActive()" />
			&nbsp; Include In-active?
		</div>
		<br /> <br />
		<table id="example" class="table table-striped table-bordered"
			cellspacing="0" width="100%">
			<thead>
				<tr>
					<th width="130px">BU/Directorate Name</th>
					<th>Office AddressLine1</th>
					<th width="80px">PostCode</th>
					<th width="80px">Contact</th>
					<th width="80px" id="includeinactive">Is Active?</th>
				</tr>
			</thead>
			<tbody id="tbody">
				<c:forEach items="${listDirectorate}" var="directorate">
					<tr id="directorate${directorate.directorateID}"
						style="cursor: pointer;"
						onClick="onActive('${directorate.directorateID}','${directorate.isActive}');">
						<td class="dictorateName"><a
							href="amendDirectorate?directorateID=${directorate.directorateID}+&orgID=${orgID}">${directorate.directorateName}</a>
						</td>
						<td>${directorate.addressLine1}</td>
						<td>${directorate.address.postCode}</td>
						<td>${directorate.contact.firstName}</td>
						<td><c:if test="${directorate.isActive == 'true'}">Yes</c:if>
							<c:if test="${directorate.isActive == 'false'}">No</c:if></td>
					</tr>
				</c:forEach>
			</tbody>
		</table>
		<hr>
		<div class="row">
			<div class="col-xs-12">
				<footer>
				<p>&copy; MockProject J2</p>

				</footer>
			</div>
		</div>
	</div>

</body>
</html>
